<!-- src/components/AddTodo.vue -->
<template>
    <div class="add">
        <h1>Add Todo</h1>

        <!-- 添加表单 -->
        <form @submit.prevent="addTodo">
            <input type="text" placeholder="请输入任务" class="search" v-model="title">
            <el-button size="large" type="primary" @click="addTodo">添加</el-button>
        </form>

        <!-- 清除所有按钮 -->
        <el-button size="large" type="danger" @click="clearAllTodos" style="margin-bottom: 1rem;" >
            清除所有
        </el-button>

    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useStore } from 'vuex'
import { ElMessageBox, ElMessage } from 'element-plus' // 引入 Element Plus 的弹窗和消息提示

const store = useStore()
const title = ref('')
const filterCount = ref(200)

function addTodo() {
    const trimmedTitle = title.value.trim()
    if (trimmedTitle === '') {
        alert('输入的任务不能为空')
        return
    }

    store.dispatch('todos/addTodo', trimmedTitle)
    title.value = ''
}


function clearAllTodos() {
    ElMessageBox.confirm(
        '确定要清除所有任务吗？此操作不可恢复！',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
        .then(() => {
            store.dispatch('todos/clearAllTodos')
            ElMessage({
                type: 'success',
                message: '所有任务已清除'
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消清除'
            })
        })
}
</script>

<style scoped>
form {
    display: flex;
    margin-bottom: 1rem;
}

.search {
    width: 100%;
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    outline: none;
}

.el-button {
    margin-left: 10px;
}
</style>